<template>
  <div class="body">
    <div class="tableHead">
      <div
        v-for="(item, index) in headList"
        :key="index"
        class="tableHeadItem"
        :style="{ flex: item.flex }"
      >{{ item.title }}
      </div>
    </div>
    <vue-seamless-scroll
      :data="dataList"
      class="scroll"
      :class-option="defaultOption"
    >
      <div
        v-for="item in dataList"
        :key="item.id"
        class="row"
      >
        <div
          v-for="head in headList"
          :key="head.name"
          class="item"
          :style="{ flex: head.flex }"
        >
          <span>{{ item[head.key] }}</span>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { getProductPricePage } from '@/api/bigdata/productPrice'
export default {
  name: 'ProductPriceTable',
  data() {
    return {
      headList: [
        {
          title: '日期',
          key: 'time',
          flex: 1
        },
        {
          title: '产品名',
          key: 'name',
          flex: 1
        },
        {
          title: '产地',
          key: 'originPlace',
          flex: 1.5
        },
        {
          title: '价格',
          key: 'price',
          flex: 1
        },
        {
          title: '单位',
          key: 'unit',
          flex: 1
        }
      ],
      dataList: [],
      defaultOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getProductPricePage({
        pageNum: 1,
        pageSize: 20,
        flag: 2
      }).then(res => {
        this.dataList = res.data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  .tableHead {
    width: 100%;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    .tableHeadItem {
      font-size: 18px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      padding-left: 15px;
      flex: 1;
    }
  }
}
.scroll {
  height: 100%;
  overflow: hidden;
}
.row {
  height: 40px;
  width: 100%;
  display: flex;
  .item {
    align-items: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding-left: 15px;
    flex: 1;
    color: #eef2f6;
  }
}
</style>
